<script setup>
import axiosInstance from '@/utils/request'
import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { HEART_MESSAGE, WS_BASE_URL } from '@/utils/constant'
const systemMessages = ref([])
const route = useRoute()
const sysId = route.query.sysId
const toId = route.query.toId
const ws = ref(null)
const NotifyListRef = ref(null)
const store = useUserStore()
// 获取系统消息
const fetchSystemMessages = () => {
  axiosInstance
    .get(`/chat-notify-message/list/${sysId}`)
    .then((response) => {
      systemMessages.value = response.data.data
    })
    .catch((error) => {
      console.log(error)
    })
}

const connectWebSocket = () => {
  ws.value = new WebSocket(WS_BASE_URL + `/ws?token=${store.token}&notify=true`)

  ws.value.onopen = () => {
    console.log('WebSocket连接已建立......NotifyPage')
  }

  ws.value.onmessage = (event) => {
    if (event.data === HEART_MESSAGE) {
      // 忽略心跳消息
      console.warn('接收到心跳消息......NotifyPage')
      return
    }
    const message = JSON.parse(event.data)
    if (message.type === 'notify') {
      if (message.content.toId == toId) {
        systemMessages.value.unshift(message.content)
        // 回传 ACK
        ws.value.send(
          JSON.stringify({
            type: 'notifyAck',
            sysId: sysId,
            toId: toId,
            msgId: message.content.id
          })
        )
      }
    }
  }

  ws.value.onclose = () => {
    console.log('WebSocket连接已关闭......NotifyPage')
  }

  ws.value.onerror = (error) => {
    console.error('WebSocket错误:', error)
  }
}
onMounted(() => {
  // 连接
  connectWebSocket()
  //获取系统消息
  fetchSystemMessages()
})
onBeforeUnmount(() => {
  if (ws.value) {
    ws.value.close() // 组件卸载时关闭连接
  }
})
</script>

<template>
  <NavBarHeader class="navbar-header">
    <template #title>系统消息</template>
  </NavBarHeader>
  <div class="system-message-container">
    <div
      class="message-list"
      ref="NotifyListRef"
      v-if="systemMessages.length > 0"
    >
      <div
        v-for="message in systemMessages"
        :key="message.id"
        class="message-item"
      >
        <!-- 昵称部分 -->
        <div class="nickname">{{ message.nickname }}</div>
        <!-- 分隔线 -->
        <div class="divider"></div>
        <!-- 消息内容 -->
        <div class="content">{{ message.content }}</div>
        <!-- 时间信息 -->
        <div class="time">{{ message.createTime }}</div>
      </div>
    </div>
    <div v-else>
      <van-empty description="暂无消息" />
    </div>
  </div>
</template>

<style scoped>
.navbar-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* 页面容器样式 */
/* 主容器样式 */
.system-message-container {
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  /* background-color: #f9f9f9; */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  width: 100%; /* 设置流式宽度 */
}

/* 消息列表样式 */
.message-list {
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  gap: 15px; /* 每条消息之间的间距 */
}

/* 消息卡片样式 */
.message-item {
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 昵称样式 */
.nickname {
  font-size: 12px;
  font-weight: 400;
  color: #170d0dc0;
  margin-bottom: 10px;
}

/* 分隔线样式 */
.divider {
  border-bottom: 1px solid #ddd;
  margin: 10px 0;
}

/* 消息内容样式 */
.content {
  font-size: 15px;
  color: #555;
  line-height: 1.5;
}

/* 时间样式 */
.time {
  font-size: 12px;
  color: #888;
  margin-top: 10px;
  text-align: right;
}
</style>
